<template>
    <div style="width: 100%; height: 100vh;display: flex;flex-direction: column;">
        <mu-appbar style="width: 100%; height: 7vh;" color="primary">
            <mu-button icon slot="left" @click="back">
                <mu-icon value="arrow_back"></mu-icon>
            </mu-button>
            支出明细
        </mu-appbar>

        <div  style="width: 100%; padding:20px;display: flex;justify-content: center">
            <mu-scale-transition>
                <mu-paper class="demo-paper grad1"  style="padding: 20px;height: 20vw;display: flex;justify-content: center;align-items: center"  :z-depth="5">
                    <div style="color:white;font-size: 20px;font-family:楷体;font-weight: bold;margin-right: 15px">余<br>额</div>
                    <div style="color:white;font-size: 30px;font-weight: bold">￥ {{price}}</div>
                </mu-paper>
            </mu-scale-transition>
        </div>
        <div style="overflow-y: auto">
            <!--表 格-->
            <mu-data-table border :columns="columns" :data="list"
                           style="width: 100%; flex: 1;">
                <template slot="expand" slot-scope="prop">
                    <div>
                        <div style="padding: 10px;">备注：{{prop.row.remark}}</div>
                        <mu-button flat color="secondary" style="float: right" @click="deleteDetail(prop.row.id)">删除</mu-button>
                    </div>


                </template>
                <template slot-scope="scope">
                    <td class="is-center">{{scope.row.modifyDateTime}}</td>
                    <td class="is-center">{{scope.row.type}}</td>
                    <td class="is-center">￥{{scope.row.money}}</td>
                    <td v-if="scope.row.remark.length>8" class="is-center">{{scope.row.remark.substr(0,8)+'...'}}</td>
                    <td v-else class="is-center">{{scope.row.remark}}</td>
                </template>
            </mu-data-table>
        </div>


        <div style="position: absolute;right: 20px;bottom: 20px">
            <mu-button fab color="success" style="opacity: 0.6" @click.native="openAlertDialog">
                <mu-icon value="add"></mu-icon>
            </mu-button>
        </div>

        <!--对 话 框-->
        <mu-dialog title="支出明细-添加" width="600" max-width="80%" :esc-press-close="false"
                   :overlay-close="false" :open.sync="openAlert">
            <mu-form ref="form" :model="form" class="mu-demo-form" label-width="100">
                <mu-form-item prop="createdDateTime" label="日期" :rules="fieldRules">
                    <mu-date-input v-model="form.createdDateTime" container="bottomSheet" label-float
                                   :max-date="new Date()"
                                   full-width actions type="date"></mu-date-input>
                </mu-form-item>
                <mu-form-item prop="type" label="类型" :rules="fieldRules">
                    <mu-select v-model="form.type">
                        <mu-option v-for="option,index in options" :key="index" :label="option.name"
                                   :value="option.value"></mu-option>
                    </mu-select>
                </mu-form-item>
                <mu-form-item prop="money" label="金额" :rules="fieldRules">
                    <mu-text-field v-model="form.money" prefix="￥" type="number"></mu-text-field>
                </mu-form-item>
                <mu-form-item prop="remark" label="备注" :rules="fieldRules">
                    <mu-text-field v-model="form.remark" multi-line :rows="2" :rows-max="4"></mu-text-field>
                </mu-form-item>
            </mu-form>

            <mu-button slot="actions" flat color="primary" @click="closeAlertDialog">取消</mu-button>
            <mu-button slot="actions" flat color="primary" @click="submit">确定</mu-button>
        </mu-dialog>
    </div>
</template>

<script>
    import {Toast, MessageBox} from 'mint-ui';
    export default {
        name: "expendDetail",
        data() {
            return {
                // 对话框
                openAlert: false,
                // 收支类型
                options: this.$Dictionary.expendType,
                sort: {
                    name: '',
                    order: 'asc'
                },
                columns: [
                    {title: '日期', width: 100, name: 'modifyDateTime'},
                    {title: '类型', name: 'type', width: 80, align: 'center', sortable: true},
                    {title: '金额', name: 'money', width: 100, align: 'center', sortable: true},
                    {title: '备注', name: 'remark', width: 100, align: 'center', sortable: true},
                ],
                list: [
                ],
                form: {
                    id: "",
                    createdDateTime: new Date(),
                    type: "1",
                    remark: "",
                    money: ""
                },
                // 空模板
                formBean: {
                    id: "",
                    createdDateTime: new Date(),
                    type: "1",
                    remark: "",
                    money: ""
                },
                // 字段校验
                fieldRules: [
                    {validate: (val) => !!val, message: '必填字段'},
                ],
                // 余额
                price:""
            }
        },
        watch: {},
        methods: {
            handleSortChange({name, order}) {
                this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
            },
            closeAlertDialog() {
                this.openAlert = false;
            },
            // 打开对话框
            openAlertDialog() {
                this.form = window.copy(this.formBean);
                this.openAlert = true;
            },
            // 删除明细
            deleteDetail(id) {
                var _this = this;
                this.$confirm('确定要删除？', '提示', {
                    type: 'warning'
                }).then(({ result }) => {
                    if (result) {
                        var formData=new FormData();
                        formData.append("id", id);
                        _this.$http.post(_this.$Api.expendDetail.deleteDetail,formData).then(function ({data: resp} = res) {
                            if (resp.code == _this.$ResponseCode.ok) {

                                window.successNotify(Toast, resp.info.msg);
                                this.refreshData();
                            } else {
                                window.failedNotify(Toast, resp.info.msg);
                            }
                        }.bind(_this));
                    } else {
                    }
                });
            },
            //添加明细
            submit() {
                var _this = this;
                this.$refs.form.validate().then((result) => {
                    if (result) {
                        var form = window.copy(this.form);
                        delete form["createdDateTime"];
                        delete form["id"];
                        _this.$http.post(_this.$Api.expendDetail.addDetail,form).then(function ({data: resp} = res) {
                            if (resp.code == _this.$ResponseCode.ok) {
                                this.form = window.copy(this.formBean);
                                this.closeAlertDialog();
                                window.successNotify(Toast, resp.info.msg);
                                this.refreshData();
                            } else {
                                window.failedNotify(Toast, resp.info.msg);
                            }

                        }.bind(_this));
                    }
                });

            },
            // list  type变换
            transform(value) {
                var _this = this;
                this.list = [];
                var newArr = value.map(function (value, index, array) {
                    for (var key in _this.$Dictionary.expendType) {
                        if (parseInt(_this.$Dictionary.expendType[key].value) == parseInt(value.type)) {
                            value.type = _this.$Dictionary.expendType[key].name;
                            return value;
                        }
                    }
                });
                return newArr;
            },
            // 获取明细列表
            getExpendList() {
                this.$http.get(this.$Api.expendDetail.batch,{
                    params:{
                        startDate:new Date(new Date()-30*3600*24*1000).Format("yyyy/MM/dd"),
                        endDate:new Date().Format("yyyy/MM/dd")
                    }
                }).then(function ({data: resp} = res) {
                    if (resp.code == this.$ResponseCode.ok) {
                        this.list = this.transform(resp.info.data);
                    } else {
                        window.failedNotify(Toast, resp.info.msg);
                    }

                }.bind(this));
            },
            // 获取余额
            getPrice() {
                this.$http.get(this.$Api.expendDetail.getPrice).then(function ({data: resp} = res) {
                    if (resp.code == this.$ResponseCode.ok) {
                        this.price=resp.info.data;
                    } else {
                        window.failedNotify(Toast, resp.info.msg);
                    }

                }.bind(this));
            },
            //刷新数据
            refreshData() {
                this.getExpendList();
                this.getPrice();
            },
            back() {
                this.$router.back();
            }
        }, created() {
            this.refreshData();

        }
    }
</script>

<style scoped>
    .grad1 {
        background: -webkit-linear-gradient(#ffb74d, #ef6c00); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(#ffb74d, #ef6c00); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(#ffb74d, #ef6c00); /* Firefox 3.6 - 15 */
        background: linear-gradient(#ffb74d, #ef6c00); /* 标准的语法（必须放在最后） */
    }
</style>
